<template>
  <div class="student-id">
    <div class="content">
      <div class="login-title">
        <img src="@/assets/login/logo@2x.png" alt="" />
      </div>
      <div class="binding-main">
        <div class="title">绑定学号/工号</div>
        <div class="prompt">首次创建需要填写学号/工号</div>
        <div class="input-row">
          <div class="id">
            <!-- <Icon type="ios-star" color="#EA3F47" size="12"/> -->
            <span>学号</span>
          </div>
          <Input
            v-model="params.number"
            :border="false"
            type="number"
            placeholder="请输入学号/工号"
            style="
              width: 300px;
              margin-left: calc(60 / 1920 * 100vw);
              background: none;
            "
          />
        </div>
        <Button type="error" class="next-btn" @click="handleTo">下一步</Button>
      </div>
    </div>
  </div>
</template>
<script>
import { getIsExist } from "../../api/otwoo.js";
export default {
  data() {
    return {
      params: {
        number: "",
        userType: this.userType,
      },
    };
  },
  props: ["userType"],
  // mounted(){
  //   this.params.userType = this.userType;
  // },
  methods: {
    handleTo() {
      if (this.params.number != "") {
        getIsExist(this.params).then((res) => {
          if (res.success) {
            this.$emit("changeStatus", { num: 4, params: this.params });
          } else {
            this.$emit("changeStatus", { num: 2 });
          }
        });
      } else {
        this.$Message.error("学号不能为空");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.student-id {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url("../../assets/login/beij@2x.png") no-repeat;
  background-size: cover;
  .content {
    width: calc(670 / 1920 * 100vw);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    .login-title {
      background-color: none;
      margin-top: calc(45 / 1920 * 100vw);
      > img {
        width: calc(390 / 1920 * 100vw);
        height: calc(40 / 1920 * 100vw);
      }
    }
    .binding-main {
      margin-top: calc(28 / 1920 * 100vw);
      width: calc(670 / 1920 * 100vw);
      height: calc(738 / 1920 * 100vw);
      border-radius: calc(10 / 1920 * 100vw);
      background: #fff;
      padding: calc(43 / 1920 * 100vw) calc(30 / 1920 * 100vw)
        calc(48 / 1920 * 100vw);
      position: relative;
      .title {
        font-size: calc(20 / 1920 * 100vw);
        color: #ea3f47;
        font-weight: bold;
        text-align: center;
      }
      .prompt {
        font-size: calc(16 / 1920 * 100vw);
        color: #535353;
        text-align: center;
        margin-top: calc(10 / 1920 * 100vw);
      }
      .input-row {
        display: flex;
        align-items: center;
        height: calc(50 / 1920 * 100vw);
        background: #f7f7f7;
        border: 1px solid #ebebeb;
        border-radius: calc(4 / 1920 * 100vw);
        margin-top: calc(33 / 1920 * 100vw);
        .id {
          margin-left: calc(18 / 1920 * 100vw);
          color: #363636;
          font-size: calc(16 / 1920 * 100vw);
        }
      }
      .next-btn {
        position: absolute;
        bottom: calc(48 / 1920 * 100vw);
        right: calc(30 / 1920 * 100vw);
        width: calc(140 / 1920 * 100vw);
        height: calc(50 / 1920 * 100vw);
        font-size: calc(20 / 1920 * 100vw);
      }
    }
  }
}
:deep(.ivu-input) {
  background: #f7f7f7;
}
</style>
